<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类</title>
    <link rel="stylesheet" href="../CSS/common.css">
    <link rel="stylesheet" href="../CSS/top.css">
    <link rel="stylesheet" href="../CSS/swiper-bundle.css">
    <link rel="stylesheet" href="../CSS/botton.css">
    <link rel="stylesheet" href="../CSS/FenLei.css">
</head>

<body>
    <div id="app">
        <!-- 头部 -->
        <header>
            <span>分类</span>
        </header>
        <!-- 轮播 -->
        <section class="warp">
            <form action="" id="form">
                <input type="text" placeholder="请输入名称" id="userName">
                <a href="./SouSuo.html"><img src="../img/ss.png" alt=""></a>
            </form>
            <!-- Swiper -->
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide liang">蔬菜</div>
                    <div class="swiper-slide liang">水果</div>
                    <div class="swiper-slide liang">海鲜</div>
                    <div class="swiper-slide">米面粮油</div>
                    <div class="swiper-slide">休闲粮食</div>
                    <div class="swiper-slide">手机数码</div>
                    <div class="swiper-slide">玩具乐器</div>
                    <div class="swiper-slide">卫生用品</div>
                    <div class="swiper-slide">手机配件</div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </section>
        <!-- 内容 -->
        <section class="warp-1">
            <div class="div-1" style="display: block;">
                <a href="./XiangXi.html" v-for="item in navOne">
                    <div class="div-r">
                        <img :src="item.URL" alt="">
                        <div class="div-you">
                            <span class="span-1">{{item.text}} </span>
                            <p style="color: rgb(156, 156, 156);"> 月售{{item.dan}} 单 好评{{item.ping}} %</p>
                            <img src="../img/会员折扣底框.png" alt="" class="img-1">
                            <p class="hui-p">会员价{{item.hui}} 折</p>
                            <p class="pp"><span style="color: rgb(189, 93, 93);">￥{{item.money}} </span>
                                <del>￥{{item.moneys}}</del></p>
                            <img src="../img/购物车满.png" alt="" class="img-2">
                        </div>
                    </div>
                </a>
            </div>
            <div class="div-1" style="display: none;">
                <a href="./XiangXi.html" v-for="item in navTwo">
                    <div class="div-r">
                        <img :src="item.URL" alt="">
                        <div class="div-you">
                            <span class="span-1">{{item.text}} </span>
                            <p style="color: rgb(156, 156, 156);"> 月售{{item.dan}} 单 好评{{item.ping}} %</p>
                            <img src="../img/会员折扣底框.png" alt="" class="img-1">
                            <p class="hui-p">会员价{{item.hui}} 折</p>
                            <p class="pp"><span style="color: rgb(189, 93, 93);">￥{{item.money}} </span>
                                <del>￥{{item.moneys}}</del></p>
                            <img src="../img/购物车满.png" alt="" class="img-2">
                        </div>
                    </div>
                </a>
            </div>
            <div class="div-1" style="display: none;">
                <a href="./XiangXi.html" v-for="item in navThree">
                    <div class="div-r">
                        <img :src="item.URL" alt="">
                        <div class="div-you">
                            <span class="span-1">{{item.text}} </span>
                            <p style="color: rgb(156, 156, 156);"> 月售{{item.dan}} 单 好评{{item.ping}} %</p>
                            <img src="../img/会员折扣底框.png" alt="" class="img-1">
                            <p class="hui-p">会员价{{item.hui}} 折</p>
                            <p class="pp"><span style="color: rgb(189, 93, 93);">￥{{item.money}} </span>
                                <del>￥{{item.moneys}}</del></p>
                            <img src="../img/购物车满.png" alt="" class="img-2">
                        </div>
                    </div>
                </a>
            </div>
        </section>
        <!-- 底部导航 -->
        <footer class="footer">
            <a href="./home.html" class="footer-2">
                <img src="../img/sy1.png" alt="">
                首页
            </a>
            <a href="#" class="footer-2">
                <img src="../img/fl2.png" alt="">
                分类
            </a>
            <a href="./GouWu.html" class="footer-2">
                <img src="../img/guc.png" alt="">
                购物车
            </a>
            <a href="./WoDe.html" class="footer-2">
                <img src="../img/wd.png" alt="">
                我的
            </a>

        </footer>
    </div>
    <script src="../jS/flexible.js"></script>
    <script src="../JS/vue3.js"></script>
    <script src="../JS/jquery.3.5.1.js"></script>
    <script src="../jS/swiper-bundle.min.js"></script>
    <script type="module">
        import Swiper from '../JS/swiper-bundle.esm.browser.min.js'
        const app = Vue.createApp({
            data() {
                return {                  
                    navOne: [],
                    navTwo: [],
                    navThree:[]
                }
            },
            mounted() {
                // 1
                fetch('../JSON/FenLei/nav-1.json').then(res => res.json()).then(res => {
                    console.log(res);
                    this.navOne = res
                })
                // 2
                fetch('../JSON/FenLei/navTwo.json').then(res => res.json()).then(res => {
                    console.log(res);
                    this.navTwo = res
                })
                // 3
                fetch('../JSON/FenLei/navThree.json').then(res => res.json()).then(res => {
                    console.log(res);
                    this. navThree = res
                })
                var swiper = new Swiper(".mySwiper", {
        slidesPerView: 4,
        spaceBetween: 0,
      });
            },
        }).mount("#app")
     
        $(function(){
          $('.swiper-wrapper .swiper-slide').click(function(){
              $(this).addClass('bian').siblings().removeClass('bian')
              var index=$(this).index()
              console.log(index);
              $(".warp-1 .div-1").eq(index).show().siblings().hide()
          })
      })
    </script>
</body>

</html>